<template>
  <view class="list-bg order-other">
    <uni-list class="list-group" :border="false">
      <template v-for="(item, index) in curCellColumn">
        <uni-list-item
          v-if="!item.hideCell"
          :key="index"
          :class="item.border ? 'border-bottom' : ''"
          :clickable="(item.methodName || item.linkUrl) ? true : false"
          :border="false"
          :show-arrow="false"
          @click="handelMethod(item)"
        >
          <template slot="header">
            <view class="slot-box">
              <view v-if="item.leftImgIconfont" class="iconfont slot-image icon-yijianfankui_tongyong_1" />
              <image v-if="item.leftImg" class="slot-image" :src="item.leftImg" mode="widthFix" />
              <text
                class="slot-text"
                :style="item.labelStyle"
              >{{ item.label }}</text>
            </view>
            <template v-if="item.bodyEl == 'input'">
              <input
                v-model="curCellData[item.fields[0]]"
                :style="(item.contentStyle || '') + (item.inputWidth ? 'width:' + item.inputWidth+ 'rpx;' : '')"
                :maxlength="item.maxLength"
                class="body-inp"
                :type="item.inputType || 'text'"
                :disabled="item.inpDisabled"
                :placeholder="item.placeholder ? item.placeholder : '请输入'"
                @input="updateCellDataFn"
              >
            </template>
          </template>
          <view
            slot="footer"
            class="row-footer-black"
          >
            <template v-if="!item.bodyEl">
              <template v-if="item.rightEl == 'input'">
                <input
                  v-model="curCellData[item.fields[0]]"
                  :style="(item.contentStyle || '') + (item.inputWidth ? 'width:' + item.inputWidth+ 'rpx;' : '')"
                  :maxlength="item.maxLength"
                  class="right-inp"
                  :type="item.inputType || 'text'"
                  :disabled="item.inpDisabled"
                  :placeholder="item.placeholder ? item.placeholder : '请输入'"
                  @input="updateCellDataFn"
                >
              </template>
              <template v-else-if="item.rightEl == 'textarea'">
                <textarea
                  :value="curCellData[item.fields[0]]"
                  :style="(item.contentStyle || '') + (item.inputWidth ? 'width:' + item.inputWidth+ 'rpx;' : '')"
                  :maxlength="item.maxLength"
                  class="right-textarea"
                  :disabled="item.inpDisabled"
                  :placeholder="item.placeholder ? item.placeholder : '请输入'"
                  @input="updateCellDataFn"
                />
              </template>
              <template v-else>
                <template
                  v-if="item.rightTextType == 'money'"
                >
                  <view
                    v-for="(fieldItem, fieldIndex) in item.fields"
                    :key="fieldIndex"
                    class="text-wrap money-text"
                    :style="item.contentStyle"
                  >
                    <template v-if="cellData[fieldItem] || cellData[fieldItem] == 0">¥</template>{{ cellData[fieldItem] || cellData[fieldItem] == 0 ? cellData[fieldItem] : '' }}
                  </view>
                </template>
                <template
                  v-else
                >
                  <view
                    v-for="(fieldItem, fieldIndex) in item.fields"
                    :key="fieldIndex"
                    class="text-wrap"
                    :style="item.contentStyle"
                  >
                    {{ cellData[fieldItem] || '' }} <text v-if="!cellData[fieldItem] && item.placeholder" class="placeholder">{{ item.placeholder }}</text> <text v-if="fieldIndex<item.fields.length-1">{{ item.separator }}</text>
                  </view>
                </template>
              </template>
            </template>
            <template
              v-if="item.btn"
            >
              <button
                v-for="(btnItem, btnIndex) in item.btn"
                :key="btnIndex"
                class="btn-border"
                :type="'default'"
                plain="true"
                @click="handelMethod(btnItem, cellData[item.fields[0]])"
              >
                {{ btnItem.btnName }}
              </button>
            </template>
            <image
              v-if="item.rightImg"
              class="slot-image"
              :src="item.rightImg"
              :style="item.picStyle"
            />
            <text v-if="item.showRightIcon" :style="item.rightIconStyle" class="right-icon font_family icon-a-arrowright_tongyong_2" />
          </view>
        </uni-list-item>
      </template>
    </uni-list>
  </view>
</template>

<script>
/**
 * cellColumn 列表头部字段
 * * @leftImg {String} 头部icon
 * * @label {String} 头部标题
 * * @border {Boolean} 是否展示边框
 * * @hideCell {Number} 是否显示cell 默认是 不存在 false - 显示, true - 隐藏，
 * * @labelStyle {String} 头部标题样式
 * * @rightEl {String} 右侧展示元素 ， 输入框 input
 * * @inputType {String} input 类型 默认是 text
 * * @maxLength {Number} 可输入长度
 * * @placeholder {String} input框 placeholder
 * * @inputWidth {String} input宽度
 * * @inpDisabled {Boolean} input是否置灰
 * * @rightTextType {String} 右侧text展示类型 默认是文本， 金额 money
 * * @fields {Array} 尾部字段值的key，动态渲染 可为数组，动态返回
 * * @contentStyle {String} 右侧文本样式
 * * @rightImg {String} 尾部icon
 * * @rightIconStyle {String} rightIcon样式
 * * @picStyle {String} 右侧图片样式
 * * @showRightIcon {Boolean} 是否展示右侧箭头
 * * @linkUrl {String} 点击跳转地址
 * * @linkType {String} 新页面跳转方式 默认是 navigateTo
 * * @methodName {String} 列表项方法名
 * * @btn {Array} 尾部增加按钮 对象数组
 * * * @btnName 按钮名称
 * * * @methodName 按钮方法名
 * cellData {Object} 列表尾部字段
 * @event {Function} click 点击 uni-list-item/button 触发事件
 */
export default {
  options: { styleIsolation: 'shared' }, //解决/deep/不生效**
  name: 'CellAssembly',
  props: {
    cellColumn: {
      type: Array,
      default: null
    },
    cellData: {
      type: Object,
      default: null
    },
  },
  data() {
    return {
      inputVal: '',
      cellDataObj: {}
    }
  },
  computed: {
    curCellColumn() {
      return this.cellColumn
    },
    curCellData() {
      return this.cellData
    }
  },
  methods: {
    updateCellDataFn() {
      this.$emit('update:cellData', this.curCellData)
      this.$emit('inputChangeFn')
    },
    handelMethod(cellItem, objItem) {
      if (cellItem.linkUrl) {
        uni[cellItem.linkType || 'navigateTo']({
          url: cellItem.linkUrl
        })
      }
      if (cellItem.methodName) {
        if (cellItem.rightEl == 'input') {
          cellItem.inputVal = this.inputVal
        }
        this.$emit('handelCellMethod', cellItem.methodName, objItem || cellItem)
      }
    }
  }
}
</script>

<style scoped lang="scss">
.list-bg{
  margin:0;
  padding:0 20rpx 20rpx;
  box-shadow: none;
  .border-bottom{
    border-bottom: 2rpx solid $uni-f5bg-color;
  }
}
.order-other{
  position: relative;
  line-height: 40rpx;
  clear: both;
  .btn-order{
    position: absolute;
    top:20rpx;
    right:20rpx;
    padding:0 20rpx;
    height: 48rpx;
    line-height: 44rpx;
    font-size:$uni-font-size-sm;
    color:$uni-orange;
    border-color:$uni-orange;
    border-radius:$uni-border-radius-lg;
  }
}
.row-header{
  display: block;
  width: 120rpx;
  font-size: $uni-font-size-sm;
  color: $uni-grey-999;
}
.row-footer{
  font-size: $uni-font-size-sm;
  color: $uni-orange;
}
.body-inp{
  width: 534rpx;
  height: 30rpx;
  text-align: right;
  font-size: $uni-font-size-sm;
}
.row-footer-black{
  font-size: $uni-font-size-sm;
  .text-wrap{
    float: left;
    .placeholder{
      color: $uni-grey-999;
    }
  }
  .money-text{
    font-weight: bold;
    color: $uni-orange;
    padding-right: 48rpx;
  }
  .right-inp{
    width: 540rpx;
    height: 30rpx;
    text-align: right;
    font-size: $uni-font-size-sm;
    display: inline-block;
    float: left;
    margin-top: -2rpx;
    color: $uni-text-color;
    border: none;
  }
  .right-textarea{
    width: 540rpx;
    max-height: 80rpx;
    text-align: right;
    font-size: $uni-font-size-sm;
    display: inline-block;
    float: left;
    margin-top: -2rpx;
    color: $uni-text-color;
  }
  .btn-border{
    float: left;
    height: 36rpx;
    line-height: 34rpx;
    color: #333;
    border: 2rpx solid #ddd;
    padding:0 20rpx!important;
    font-size: $uni-font-size-sm;
    /*#ifdef MP-ALIPAY*/
    margin: -6rpx 0 0 10rpx;
    /*#endif*/
    /*#ifdef MP-WEIXIN*/
    margin: 0 0 0 10rpx;
    /*#endif*/
    border-radius:4rpx;
  }
}
.list-group-up-con{
  background:$uni-orange;
  border-radius:6rpx;
  color:#fff;
  margin:8rpx auto 0;
  padding:6rpx 0 10rpx;
  position: relative;
  clear: both;
  zoom: 1;
  .img{
    width: 18rpx;
    height: 18rpx;
    transform: rotate(45deg);
    background:$uni-orange;
    border-radius: 2rpx;
    position: absolute;
    top:-4rpx;
    right:30rpx;
  }
  .flex-item{
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
    line-height: 54rpx;
    margin:0 20rpx;
    color:#fff;
    width:calc(25% - 40rpx);
    float: left;
    font-size: $uni-font-size-sm;
  }
}
.list-group-up-con:after{
  content:" ";
  display: block;
  height: 0;
  clear: both;
}
.qrcode-con{
  padding:40rpx;
  .popup-close{
    position: absolute;
    bottom:-55px;
    left:50%;
    margin-left: -15px;
  }
}
.slot-box {
  /* #ifndef APP-NVUE */
  display: flex;
  /* #endif */
  flex-direction: row;
  align-items: center;
  float: left;
}
.slot-image {
  /* #ifndef APP-NVUE */
  display: block;
  /* #endif */
  margin: 0 18rpx 0 0;
  width: 32rpx;
  height: 32rpx;
  float: left;
}
.right-icon{
  margin-top: 4rpx;
  font-size:$uni-font-size-lg;
  color: $uni-text-color;
}
.slot-text {
  flex: 1;
  font-size: $uni-font-size-base;
  color: $uni-text-color;
  margin-right: 10rpx;
}
/deep/ .uni-list-item__container{
  padding-left: 0!important;
  padding-right: 0!important;
}
</style>
